




class Yhj {
    constructor(qr) {
        this.qr = qr.productid
        this.proList = document.querySelector('#proList')
        this.lis = this.proList.children
        console.log(this.proList.children);

        // console.log(this.qr);
        this.method()
        this.clk()
        //let { productid } = this.qr;//解构传递过来的productid这个参数
    }
    method() {
        fetch(`http://chst.vip:1234/api/getcouponproduct?couponid=${this.qr}`)
            .then(body => body.json())
            .then(res => {
                // console.log(res);
                this.render(res.result)

            })
    }
    render(data = []) {
        let newData = [...data]
        // console.log(newData);
        let page = ''
        newData.forEach(item => {
            // console.log(item);
            page += `
            <li data-index="${item.couponProductId}">
                <a class="clearfix">
                    <div class="img fl">
                        ${item.couponProductImg}
                    </div>
                    <div class="infoR">
                        <h4>${item.couponProductName}</h4>
                        <p class="price">
                          ${item.couponProductPrice}
                        </p>
                       <p class="time">${item.couponProductTime}</p>
                    </div>
                </a>
            </li>
            `
        })
        this.proList.innerHTML = page
    }

    点击显示轮播图
    clk() {
        fetch(`http://chst.vip:1234/api/getcouponproduct?couponid=${this.qr}`)
            .then(body => body.json())
            .then(res => {
                console.log(res);
                let page1 = ""

                res.result.forEach(item => {
                    console.log(item);
                    page1 += `
            <li>
            ${item.couponProductImg}
            </li>
            `
                 })
                $('.carousel .marskSm .info').html(page1);
                // this.render(res.result)
                var ul = document.querySelector('.marskSm .info');
                var lis = document.querySelectorAll('.marskSm li');
                ul.style.width = lis.length * lis[0].offsetWidth + 'px';
                
                console.log(ul);
                console.log(lis);
                var index = 0;
                var flag = true;
                $('.arrRight').click(function(num){
                    if(flag){
                        flag = false
                        index++
                        if(index<=lis.length-1){
                            ul.style.transform = 'translateX(' + -index * lis[0].offsetWidth + 'px' + ')';
                            ul.style.transition = '.5s ease-in-out'
                        }else{
                            index = lis.length-1;
                                alert('已经是最后一页啦');
                                flag = true;
                        }
                    }
                    ul.addEventListener('webkitTransitionEnd', function () {
                        // flag = true;
                })
            })
            $('.arrLeft').click(function(num){
                if(flag){
                    index--;
                    flag = false;
                    if(index>=0){
                        ul.style.transform = 'translateX(' + -index * lis[0].offsetWidth + 'px' + ')';
                        ul.style.transition = '.5s ease-in-out'
                    }else{
                        index = 0;
                        alert('已经是第一页啦');
                        // return;
                        flag = true;
                    }
                }
                ul.addEventListener('webkitTransitionEnd', function () {
                    // flag = true;
                }) 
            })
            $('.carousel').css({'transform':'translateY(-1000px)',"transition": "all 0.7s ease-in-out 0s"});

              //每一个单个点击事件
              $('#product #proList').find('li').click(function () {
                $('.carousel').css({'transform': 'translateY(0px)', 'transition': '.7s ease-in-out'});
                ul.style.transition = 'none';
                index = $(this).data('index');
                ul.style.transform = 'translateX(' + -index * lis[0].offsetWidth + 'px' + ')';
            });
             //关闭点击事件
             $('.marskSm').find('i').click(function () {
                $('.carousel').css({'transform':'translateY(-1000px)',"transition": "all 0.7s ease-in-out 0s"});
            })
    }

    // clk()
            )

        }
    }
// clk()
// console.log(location.href);

// ((function(){
// let qr = getUrlParams(location.href)

// }))
let qr = getUrlParams(location.href)
// console.log(qr);
let yhj = new Yhj(qr)

